<html>
<head>
    <title>ztree</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/common/bootstrap/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/common/zTree/css/metroStyle/metroStyle.css"/>

    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/common/bootstrap-table/bootstrap-table.css"/>

    <script type="text/javascript" src="${pageContext.request.contextPath}/common/js/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/common/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/common/zTree/js/jquery.ztree.all.js"></script>

    <script type="text/javascript" src="${pageContext.request.contextPath}/common/bootstrap-table/bootstrap-table.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/common/bootstrap-table/bootstrap-table-zh-CN.js"></script>

    <script type="text/javascript">

    	var setting = {
    		view: {
    			selectedMulti: false
    		},
    		check: {
                enable: true,
                chkboxType: { "Y": "", "N": "" }
    		},
    		async: {
				enable: true,
				url:"${pageContext.request.contextPath}/tree/getTreeByPid",
				autoParam:["id", "pid"]
			},
			callback: {
                beforeCheck: function(treeId, treeNode){
                    //var treeObj = $.fn.zTree.getZTreeObj(treeId);
                    //treeObj.cancelSelectedNode();
                    //treeObj.checkAllNodes(false);
                    //var checkedNode = treeObj.getCheckedNodes()[0];
                    //treeObj.selectNode(checkedNode);
                },
                onCheck: function(event, treeId, treeNode){
                    var treeObj = $.fn.zTree.getZTreeObj(treeId);
                    treeObj.cancelSelectedNode();
                    treeObj.checkAllNodes(false);
                    treeObj.checkNode(treeNode, true, true);
                    treeObj.selectNode(treeNode);
                },
                beforeClick: function(treeId, treeNode, clickFlag){

                },
                onClick: function(event, treeId, treeNode){
                    var treeObj = $.fn.zTree.getZTreeObj(treeId);
                    treeObj.cancelSelectedNode();
                    treeObj.checkAllNodes(false);
                    treeObj.checkNode(treeNode, true, true);
                    treeObj.selectNode(treeNode);
                    //treeObj.expandNode(treeNode,true,true,true);
                }
			}
    	};

	    $(document).ready(function(){

	    	//ztree init
	    	$.fn.zTree.init($("#tree"), setting);

	    	var $regionsTable = $('#regionsTable');

	    	$regionsTable.bootstrapTable({
	    		height:$(document).height()-200,
	    		striped:true,
	    		pagination:true,
	    		pageNumber:1,
	    		pageSize:10,
	    		pageList:[10, 25, 50, 100, -1],
	    		search:true,
	    		searchOnEnterKey:true,
	    		showRefresh:true,
	    		showToggle:true,
	    		detailView:true,
	    		singleSelect: true,
	    		columns:[
	    			{
	    				field:'state',
	    				checkbox:true
	    			},
	    			{
	                    field: 'id',
	                    title: '序号',
	                    width: 100,
	                    align: 'center',
	                    valign: 'middle',
	                    sortable: true
                	},
	    			{
	                    field: 'name',
	                    title: '姓名',
	                    width: 100,
	                    align: 'center',
	                    valign: 'middle',
	                    sortable: true
                	}, 
                	{
 
	                    field: 'gender',
	                    title: '性别',
	                    width: 40,
	                    align: 'left',
	                    valign: 'top',
	                    sortable: true
	                }, 
	                {
	                    field: 'birthday',
	                    title: '出生日期',
	                    width: 80,
	                    align: 'left',
	                    valign: 'top',
	                    sortable: true
	                }, 
	                {
	                    field: 'ctfId',
	                    title: '身份证',
	                    width: 80,
	                    align: 'middle',
	                    valign: 'top',
	                    sortable: true
	                }, 
	                {
	                    field: 'address',
	                    title: '地址',
	                    width: 180,
	                    align: 'left',
	                    valign: 'top',
	                    sortable: true
	                }, 
	                {
	                    field: 'tel',
	                    title: '固定电话',
	                    width: 100,
	                    align: 'left',
	                    valign: 'top',
	                    sortable: true
	                }, 
	                {
	                    field: 'mobile',
	                    title: '手机号码',
	                    width: 100,
	                    align: 'left',
	                    valign: 'top',
	                    sortable: true
	 
	                }, 
	                {
	                    field: 'operate',
	                    title: '操作',
	                    width: 100,
	                    align: 'center',
	                    valign: 'middle'
	                }
	    		],
	    		data:[
	    			{
	    				id:1,
	    				name:'aaa'
	    			},
	    			{
	    				id:2,
	    				name:'bbb'
	    			},
	    			{
	    				id:3,
	    				name:'ccc'
	    			},
	    			{
	    				id:1,
	    				name:'ddd'
	    			},
	    			{
	    				id:1,
	    				name:'fff'
	    			},
	    			{
	    				id:1,
	    				name:'ggg'
	    			},
	    			{
	    				id:1,
	    				name:'hhh'
	    			},
	    			{
	    				id:1,
	    				name:'iii'
	    			},
	    			{
	    				id:1,
	    				name:'jjj'
	    			},
	    			{
	    				name:'kkk'
	    			},
	    			{
	    				name:'lll'
	    			},
	    			{
	    				name:'mmm'
	    			},
	    			{
	    				name:'nnn'
	    			},
	    			{
	    				name:'ooo'
	    			},
	    			{
	    				name:'ppp'
	    			},
	    			{
	    				name:'qqq'
	    			},
	    			{
	    				name:'rrr'
	    			},
	    			{
	    				name:'sss'
	    			}
	    		]
	    	});
	    });

    </script>
</head>
<body> ${user}
	<div class="container-fluid panel panel-default" style="margin:20px;">
		<div class="row">
			<div class="col-sm-3">
				<ul id="tree" class="ztree"></ul>
			</div>
			<div class="col-sm-9">
				<table id="regionsTable"></table>
			</div>
		</div>
	</div>
</body>
</html>
